<template>
  <div>
    <div class="box-2" id="addstudent">
      <h1>新增信息</h1>

      <div class="box-1-1">
        <h5>数据新增</h5>
        <div class="box-2-1">
          <p>学生姓名： <input type="text" v-model.lazy="student.name" /></p>
          <p>
            学生性别：
            <input type="radio" v-model.lazy="student.gender" name="addstusex" value="男" />男
            <input type="radio" v-model.lazy="student.gender" name="addstusex" value="女" />女
          </p>
          <p>学生年龄： <input type="text" v-model.lazy="student.age" /></p>
          <p>学生班级 ：<select name="" id="select01" v-model.lazy="student.classesId">
              <option v-for="item in classesdata" :key="item._id" :value="item._id">{{item.name}}</option>
            </select></p>
          <p>上传照片 ：<input type="file" id="inptx" /></p>
          <button class="addstudent-button" @click="addstudent()">
            确认新增
          </button>
        </div>
        <div class="tx">
          <!-- <img src="./abc/Portrait_small.jpg" alt="" style="width: 200px; height: 200px;"> -->
          <h1>头像</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import api from "../http/api";

  export default {
    data() {
      return {
        student: {
          name: "",
          age: "",
          gender: "",

        },
        classesdata: []
      };
    },
    mounted() {
      this.getclasses();
    },
    methods: {
      async addstudent() {
        const data = await api.students.addstudent(this.student);

      },
      async getclasses() {
        //发送请求获取学生数据
        const data = await api.classes.getclasses();
        if (data.code) {
          this.classesdata = data.data.result;
        }
      },

    },
  };
</script>

<style>
</style>